<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户id">
      <el-input v-model="findForm.userId" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="内容类型">
      <el-select clearable v-model="findForm.type" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="userId"
      label="用户id"
      width="140">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="state"
      width="80"
      label="状态">
    </el-table-column>
    <el-table-column
      prop="unPassNumber"
      width="120"
      label="违规数">
    </el-table-column>
    <el-table-column
      prop="unPassPer"
      width="120"
      label="违规百分比">
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="最新审核时间">
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="最新添加时间">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <i v-if="scope.row.state=='正常'" @click="changeState(scope.row)">封禁</i>
        <i v-else @click="changeState(scope.row)">解封</i>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="findForm.size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</div>
</template>

<script>
import {findAllUsersAuthor, ban, unseal} from "@/api/userManage";

export default {
  name: "userPermission",
  data() {
    return {
      formInline: {},
      total: undefined,
      findForm: {
        userId: undefined,
        type: undefined,
        page: 1,
        size: 10
      },
      options: [{
          value: '1',
          label: '生活分享'
        },
        {
          value: '2',
          label: '计划'
        },
        {
          value: '3',
          label: '朗读'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getAllUsers()
  },
  methods: {
    onSubmit() {
      this.getAllUsers()
    },
    handleCurrentChange(page) {
      this.findForm.page = page
      this.getAllUsers()
    },
    changeState(row) {
      console.log(row)
      if (row.type === null) {
        this.$message.error("请选择类型")
      } else {
        let type;
        if (row.type === '生活分享')
          type = 1;
        else if (row.type === '计划')
          type = 2;
        else
          type = 3
        if (row.state === '正常')
          ban(row.userId, type).then(res => {
            if (res.body.data === true) {
              this.$message.success("封禁成功")
              row.state = '禁言'
            }
            else
              this.$message.error("请重新操作")
          })
        else
          unseal(row.userId, type).then(res => {
            if (res.body.data === true) {
              this.$message.success("解封成功")
              row.state = '正常'
            }
            else
              this.$message.error("请重新操作")
          })
      }
    },
    rounding (value) {
      return value.toFixed(2)
    },
    getAllUsers() {
      findAllUsersAuthor(this.findForm).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
        for (let i=0;i<this.tableData.length;i++) {
          let type = this.tableData[i].type
          if (type === 1)
            this.tableData[i].type = '生活分享'
          else if (type === 2)
            this.tableData[i].type = '计划'
          else if (type === 3)
            this.tableData[i].type = '朗读'
          this.tableData[i].unPassPer = this.rounding(this.tableData[i].unPassPer) + '%'
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
